אחרי שהכרנו וגילינו מה טוב ב-Twig אנחנו מתקדמים ויוצרים תבניות מתקדמות\פשוטות.
חלקים
* חלק א' כאן
מה במדריך?
אחרי שהכרנו עם המערכת Twig וגילינו את הצדדים הטובים בה אנחנו לא עוצרים לרגע וממשיכים ללמוד הכל על המערכת.
בחלק הזה נלמד כיצד ליצור תבניות פשוטות על ידי שימוש בInclude אחרי שנבין את הבסיס נתקדם וניצור תבניות מתקדמות על ידי שימוש ב Layout ו Blockים.
כמו שאמרתי המדריך הקודם ל-Twig אפשרויות רבות, בין האפשרויות ישנה אפשרות מדהימה ליצירת תבניות בצורה שונה מהרגיל.
הגדרות והכנות
ליפני שנתחיל לעבוד על התבניות שלנו יש כמה צעדים פשוטים ליפני זה על מנת להוציא את המיטב מהמערכת.
תיקיות
ליפני תחילת העבודה יש ליצור מספר תיקיות שישמשו אותנו בעתיד הקרוב,
1: Public
2: Public/Html
3: Public/Html/Layout
זה אמור להראות ככה:
-Public
--Public/Html
---Public/Html/Layout
מתחילים לעבוד
אחרי שהכנו הכל אנחנו מתחילים לעבוד עם הסבר על כל מה שאנחנו עושים,
קודם כל בואו נחליף את הקוד הבא:
$loader = new Twig_Loader_String();
$twig = new Twig_Environment($loader);
echo $twig->render('Hello {{ world }}!', array('world' => 'World!'));
$twig = new Twig_Environment($loader);
echo $twig->render('Hello {{ world }}!', array('world' => 'World!'));
לקוד הבא:
$loader = new Twig_Loader_Filesystem('/path/to/Public/Html');
$twig = new Twig_Environment($loader);
echo $twig->render('hello.html', array('world' => 'World'));
$twig = new Twig_Environment($loader);
echo $twig->render('hello.html', array('world' => 'World'));
מה שעשינו זה הגדרנו החלפנו את התבנית שקודם נכתבה בפרמטר הראשון של render לתבנית שנכתבת בקובץ נפרד.
כעת אם תריצו את הקוד תקבלו הודעת שגיאה שנוצרה על ידי Twig וכך היא נראת:
Uncaught exception 'Twig_Error_Loader' with message 'Unable to find template "hello.html" (looked into: ./Public).' in D:\User\Serve\www\Twig\Protected\Twig\Loader\Filesystem.php on line 129
(פירוש: לא ניתן למצוא את התבנית "hello.html" בתקיה /path/to/Public)
תיקון השגיאה
על מנת לתקן את השגיאה עלינו ליצרו קובץ בשם hello.html בתקיה Public/Html, דוגמא לקובץ פשוט:
<html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
Hello {{ world }}!
</body>
</html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
Hello {{ world }}!
</body>
</html>
כעת אחרי שנריץ את העמוד נקבל את הפלט הבא: Hello World!, הקוד מקור:
<html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
Hello World!
</body>
</html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
Hello World!
</body>
</html>
הופכים את התבנית למתקדמת קצת יותר
בדרך כלל באתרים אתם רואים שיש חלקים שלא משתנים באתר(Header & Footer - החלק העליון והתחתון של העמוד), בשביל לבצע דבר כזה יש שתי אפשרויות:
1: Include
2: Layout & Blocks
על שתי האפשרויות נפרט ונסביר בהמשך המדריך.
Include - יבוא קבצים
אחת האפשרויות ש-Twig מציאה היא פונקציית ה Include שמאפשרת ליבא תבנית\קובץ אל תבנית אחרת.
אפשר להשתמש בפונקצייה זו על מנת ליצור עמודים עם חלק עליות ותחתון זהה לחלוטין.
כיצד עושים את זה
על מנת להבין כיצד נעשה את זה עלינו לחלק את העמוד לשלושה חלקים: חלק עליון, תוכן העמוד, חלק תחתון:
וככה זה יראה עם קודים:
כותבים את העמוד
עכשיו בואו נתרגם את התמונות לקוד פשוט, ליפני כן יש ליצור שתי קבצים בתקייה Public/Html/Layout:
* Header.html
* Footer.html
כך יראו התקיות:
-Public
--Public/Html
--hello.html
---Public/Html/Layout
---- Header.html
---- Footer.html
כעת אחראי שיצרתם את שתי הקבצים בואו נכתוב קוד מתאים בכל קובץ,
נתחיל עם hello.html:
{% include 'Layout/header.html' %}
Hello {{ world }}!
{% include 'Layout/footer.html' %}
Hello {{ world }}!
{% include 'Layout/footer.html' %}
header.html:
<html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
footer.html:
</body>
</html>
</html>
מה שעשינו זה יצרנו שתי עמודים וקובץ תבנית, בקובץ תבנית עשינו יבוא של שתי הקבצים על פי הדרישה על מנת ליצור מעטפת.
לאחר הרצת הקוד, קוד המקור שמתקבל הינו:
<html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
Hello World!
</body>
</html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
Hello World!
</body>
</html>
במדריך הבא
* משפרים את התבניות עוד יותר
* יצירת תנאי IF
המדריך הבא
Twig - תבניות מתקדמות ותנאי If
תגובות לכתבה:
מעולה. תודה.
תוסיף בבקשה קישורים מפה לחלק הראשון
ומהחלק הראשון לפה.
@intval ערכתי :)
דרך אגב אלכס לא זזות לי הנקודות... כיאילו אני מקבל רק על מדריכים אני לא מקבל על תשובות וזה..
מדריך נחמד. תודה רבה. :)